.Message.right {
  -webkit-animation: messageRight .5s ease-in-out;
  animation: messageRight .5s ease-in-out;
}
.Message.left {
  -webkit-animation: messageLeft .5s ease-in-out;
  animation: messageLeft .5s ease-in-out;
}
@keyframes messageRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes messageLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.Message.right .Bubble {
  border-radius: 20px 4px 20px 20px;
  background: var(--brand-3);
}
.Message.left .Bubble {
  border-radius: 4px 20px 20px 20px;
  background: var(--white);
}
.Bubble.text {
  padding: 6px 10px;
}